<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
    room: {
        type: String,
        required: true
    }
})

// 直播间地址
const roomSrc = computed(() => {
    return `https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=${ props.room }&quality=0&enableAutoPlayTips=0&mute=0&enableCtrlUI=0`
})

</script>

<template>
    <div class="pk-room-iframe">
        <div class="pk-room-mask"></div>
        <iframe ref="refIframe"
                class="pk-iframe-content"
                style="width: 100%; height: 100%; border: none;"
                :src="roomSrc"
                framespacing="0"
                scrolling="no"
                pointerEvents='none'
                allow="autoplay; encrypted-media"
                allowfullscreen></iframe>
    </div>
</template>

<style scoped>
.pk-room-iframe {
    width: 100%;
    height: 100%;
    position: relative;
    user-select: none;

    .pk-room-mask {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        position: absolute;
        user-select: none;
    }

    .pk-iframe-content {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        user-select: none;
    }
}
</style>
